<template>
	<navigatorComp :title="`${title}家族族谱`" bgcColor="#121512" fontColor="#fff"></navigatorComp>

	<view class="content">
		<view class="createClan_inputBox">
			<view class="createClan_posterBox">
				<!-- <image class="createClan_image" :src="`http://112.124.50.179:8888/imgs/home/clan_${frontCoverUrl}.png`"></image> -->
				<image class="createClan_image" v-if="clanForm.frontCoverUrl == 1" src="http://112.124.50.179:8888/imgs/home/clan_1.png"></image>
				<image class="createClan_image" v-if="clanForm.frontCoverUrl == 2" src="http://112.124.50.179:8888/imgs/home/clan_2.png"></image>
				<image class="createClan_image" v-if="clanForm.frontCoverUrl == 3" src="http://112.124.50.179:8888/imgs/home/clan_3.png"></image>
				<image class="createClan_image" v-if="clanForm.frontCoverUrl == 4" src="http://112.124.50.179:8888/imgs/home/clan_4.png"></image>
				<image class="createClan_image" v-if="clanForm.frontCoverUrl == 5" src="http://112.124.50.179:8888/imgs/home/clan_5.png"></image>
				<view class="imgText">家族族谱</view>
			</view>
			<view class="poster_title">封面设置</view>
			<view class="poster_bgc_list">
				<view v-for="(item, index) in posterBgcList" class="poster_bgc display_flex"
					:style="{ backgroundColor: item }" @click="clanForm.frontCoverUrl = index + 1">
					<u-icon v-if="clanForm.frontCoverUrl == index + 1" name="checkbox-mark" color="#FFF"
						size="20"></u-icon>
				</view>
			</view>

			<u-form label-width="100" label-style="font-size:28rpx;color: #FFFFFF;" :model="clanForm" ref="uForm">
				<u-form-item label="族谱名称:" prop="name" required>
					<u-input v-model.trim="clanForm.genealogyName" border="none" placeholder="请输入族谱名称" clearable
						maxlength="20" />
				</u-form-item>
				<u-form-item label="家族姓氏:" prop="genealogySurname" required>
					<u-input v-model.trim="clanForm.genealogySurname" border="none" placeholder="请输入家族姓氏,如王" clearable
						maxlength="2" />
				</u-form-item>
				<u-form-item label="始祖名称:" prop="ancestor">
					<u-input v-model="clanForm.ancestorName" border="none" placeholder="请输入始祖名称" clearable
						maxlength="20" />
				</u-form-item>
				<u-form-item label="祖籍地:" prop="ancestralHomeland">
					<pickerAddress @change="changeAddress">
						<view class="display_flex">
							<view :class="['placeHolder', clanForm.ancestralHomeland && 'value']">
								{{ clanForm.ancestralHomeland || '请选择' }}
							</view>
							<image class="arrow_right" src="http://112.124.50.179:8888/imgs/home/arrow_right.png" mode=""></image>
						</view>
					</pickerAddress>
				</u-form-item>
				<u-form-item label="族谱简介:" prop="summarized" labelPosition="top" labelWidth="300rpx">
					<view class="createClan_inputBox_summarized">
						<!-- :adjustPosition="false" -->
						<up-textarea placeholderClass="placeholderClass" v-model="clanForm.summarized"
							placeholder="请输入简介" height="270rpx" border="none" count maxlength="200"></up-textarea>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<footerBtn bgcColor="#121512" :btnDisable="btnDisable" :name="isEdit ? '确认修改' : '创建族谱'" @clickBtn="handleClan">
			<image v-if="!isEdit" style="width: 40rpx; height: 40rpx; margin-right: 4rpx"
				src="http://112.124.50.179:8888/imgs/home/add_memory.png" mode=""></image>
		</footerBtn>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		reactive,
		nextTick,
		getCurrentInstance,
		watchEffect
	} from 'vue';
	import {
		onLoad,
		onShow,
		onUnload
	} from '@dcloudio/uni-app';
	import navigatorComp from '/components/navigator/index.vue';
	import pickerAddress from '/components/picker/addressPicker.vue';
	import footerBtn from '/components/footerBtn/index.vue';
	import HomeApi from '@/API/home/index.js';
	import _ from 'lodash';
	const homeApi = new HomeApi();

	const posterBgcList = ['#1A385E', '#BD2B4A', '#AC7631', '#852ABD', '#33AE73'];

	const btnDisable = ref(true);
	const clanForm = reactive({
		genealogyId: 0,
		frontCoverUrl: 1, //封面图片
		genealogyName: '',
		genealogySurname: '',
		ancestorName: '',
		ancestralHomeland: '',
		summarized: ''
	});
	const isAggrement = ref(0);
	const address = ref();
	const height = ref(0);
	const title = ref('新增');
	const isEdit = ref(false); //是否是编辑页

	watchEffect(() => {
		if (clanForm.genealogyName !== '' && clanForm.genealogySurname !== '') {
			btnDisable.value = false;
		}
	});

	onLoad((options) => {
		if (options.genealogyId) {
			title.value = '编辑';
			isEdit.value = true;
			clanForm.genealogyId = options.genealogyId;
			getGenealogyInfo();
		} else {
			title.value = '新增';
			isEdit.value = false;
		}
	});

	onMounted(() => {
		// #ifdef MP-WEIXIN
		height.value =
			uni.getSystemInfoSync().screenHeight -
			getApp().globalData.bottom -
			getApp().globalData.navHeight
		// #endif

		// #ifdef APP || H5
		height.value =
			uni.getSystemInfoSync().screenHeight -
			getApp().globalData.bottom -
			getApp().globalData.navHeight -
			uni.upx2px(88);
		// #endif
	});
	
	

	const getGenealogyInfo = () => {
		uni.showLoading()
		homeApi.getGenealogyInfo({
			genealogyId: clanForm.genealogyId
		}).then((res) => {
			if (res.code === 0) {
				Object.keys(clanForm).forEach((item) => {
					if (item != 'genealogyId') {
						clanForm[item] = res.data[item];
					}
				});
				clanForm.ancestralHomeland = res.data.ancestralHomeland.replace(/,/g, '');
				address.value = res.data.ancestralHomeland.split(',');
			}
			uni.hideLoading()
		});
	};

	const changeAddress = (e) => {
		if (e.data) {
			address.value = JSON.parse(JSON.stringify(e.data));
			clanForm.ancestralHomeland = e.data.join('');
		}

	};

	/**
	 * 校验数据
	 */
	const validate = () => {
		if (clanForm.genealogyName.trim() === '') {
			uni.showToast({
				title: '请输入族谱名称',
				icon: 'none'
			});
			return false;
		} else if (clanForm.genealogyName.trim().length<2) {
			uni.showToast({
				title: '族谱名称应输入2-6字符',
				icon: 'none'
			});
			return false;
		}else if (clanForm.genealogySurname.trim() === '') {
			uni.showToast({
				title: '请输入族谱姓氏',
				icon: 'none'
			});
			return false;
		}
		return true;
	};
	
	/**
	 * 防抖
	 */
	const handleClan =_.debounce(()=>{
		editClan()
	},500)

	/**
	 * 点击创建/修改族谱
	 */
	const editClan = () => {
		uni.showLoading()
		if (!validate()) {
			return;
		}
		let params = {
			frontCoverUrl: clanForm.frontCoverUrl,
			genealogyName: clanForm.genealogyName,
			genealogySurname: clanForm.genealogySurname,
			ancestorName: clanForm.ancestorName,
			ancestralHomeland: address.value ? address.value.toString() : '',
			summarized: clanForm.summarized,
			genealogyId: clanForm.genealogyId,
			opType: isEdit.value ? 2 : 1 //（1:创建，2:修改）
		};
		homeApi.createGenealogy(params).then((res) => {
			uni.hideLoading()
			if (res.code === 0) {
				uni.showToast({
					title: isEdit.value ? '编辑成功!' : '创建成功！',
					duration: 500
				});
				setTimeout(() => {
					uni.navigateBack()
				}, 500);
			}
		});
	};
</script>

<style lang="scss">
	page {
		background-color: #121512;
		/* #ifdef H5 */
		padding-top: 0;
		/* #endif */
		box-sizing: border-box;
	}

	.content {
		padding: 0;
		overflow: auto;
	}

	.createClan_inputBox {
		margin: 0 32rpx 40rpx 32rpx;
		background: linear-gradient(225deg, #292b2a 0%, #8a918e 100%);
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 32rpx 32rpx 40rpx;
		box-sizing: border-box;

		.createClan_posterBox {
			position: relative;

			image {
				width: 168rpx;
				height: 240rpx;
			}

			.imgText {
				font-family: '宋体';
				font-weight: 600;
				font-size: 28rpx;
				color: #000000;
				line-height: 35rpx;
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				writing-mode: vertical-lr;
				letter-spacing: 3rpx;
			}

			.fuxinText {
				font-family: '宋体';
				font-weight: 600;
				font-size: 25rpx;
				color: #000000;
				top: 20rpx;
				right: 22rpx;
			}
		}

		.createClan_image {
			width: 160rpx;
			height: 240rpx;
			margin-bottom: 24rpx;
		}

		.poster_title {
			font-weight: 400;
			font-size: 24rpx;
			color: #ffffff;
			line-height: 28rpx;
			margin-bottom: 24rpx;
		}

		.poster_bgc_list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 56rpx;
			width: 328rpx;
			// gap: 32rpx;

			.poster_bgc {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.createClan_input {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		::v-deep .u-form {
			width: 100%;
			padding-left: 10rpx;
			box-sizing: border-box;
		}

		::v-deep .input-placeholder {
			font-weight: 400;
			font-size: 28rpx;
			color: #999999 !important;
			line-height: 33rpx;
			text-align: right;
		}

		::v-deep .uni-input-input {
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 33rpx;
			text-align: right;
		}

		::v-deep .u-form-item__body__right__content__slot {
			display: flex !important;
			align-items: center !important;
			justify-content: flex-end !important;
		}

		::v-deep .u-form-item__body {
			padding: 0 !important;
			margin-bottom: 32rpx !important;
		}

		.placeHolder {
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			line-height: 33rpx;
			text-align: right;
		}

		.value {
			color: #ffffff;
		}

		.arrow_right {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.createClan_inputBox_summarized {
		width: 100%;
		margin-top: 24rpx;

		::v-deep .placeholderClass {
			font-weight: 400 !important;
			font-size: 28rpx !important;
			color: #999999 !important;
			line-height: 33rpx !important;
		}

		::v-deep .u-textarea {
			background: rgba(255, 255, 255, 0.1) !important;
			padding: 32rpx 40rpx !important;
			box-sizing: border-box !important;
		}

		::v-deep .u-textarea__field {
			color: #fff !important;
			font-weight: 500 !important;
			text-align: justify !important;
		}

		::v-deep .u-textarea__count {
			background: none !important;
			font-weight: 400 !important;
			font-size: 28rpx !important;
			color: #999999 !important;
			line-height: 33rpx !important;
			margin-right: 25rpx;
			margin-bottom: 24rpx;
			padding: 0;
		}
	}

	.createClan_inputBox_tip {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 36rpx;
		justify-content: flex-start;
		margin-left: 32rpx;
		margin-top: -14rpx;
	}
</style>